<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <script src="../static/js/echarts.min.js"></script>
    <title>Title</title>
  </head>
  <body>
    <div id="main" style="width: 1200px;height:600px;" align="center"></div>
    <script type="text/javascript">
      var myChart = echarts.init(document.getElementById('main'));
      var option = {
        title: {
            text: '古诗类型数量展示',
            left: 'center',
          },
          legend: {
            top: 'bottom'
          },
          toolbox: {
            show: true,
            feature: {
              mark: { show: true },
              dataView: { show: true, readOnly: false },
              restore: { show: true },
              saveAsImage: { show: true }
            }
          },
          tooltip: {
            trigger: 'item'
          },
          legend: {
            orient: 'vertical',
            left: 'left'
          },
          series: [
            {
              name: 'Number',
              type: 'pie',
              radius: [50, 250],
              center: ['50%', '50%'],
              roseType: 'area',
              itemStyle: {
                borderRadius: 7
              },
              data: [
                { value: 29, name: '五言绝句' },
                { value: 51, name: '七言绝句' },
                { value: 80, name: '五言律诗' },
                { value: 53, name: '七言律诗' },
                { value: 35, name: '五言古诗' },
                { value: 28, name: '七言古诗' },
                { value: 44, name: '乐府' }
              ],
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        };
      myChart.setOption(option);
    </script>
  </body>
</html>